<script setup>
import { ref } from 'vue'
import {Image,Toast} from 'vant'
import router from '@/router'
import http from '@/http'

const storeId = ref('')
storeId.value = JSON.parse(localStorage.getItem('shop')).shopDescription
console.log(storeId.value);
const clueList = ref([])
const goVideoInformation = (id) => {
    router.push({ path: '/information/videoInformation', query: { id: id } })
}

// const getItem = async() => {
//   const res = await http.post('/saveClue',{
//     clueName:getTime() + '线索信息',
//     storeId:storeId.value,
//   })
//   console.log(res);
// }
const getClue = async() => {
    Toast.loading({  
      message: '加载中...',  
      forbidClick: true,  
      duration: 0,
    });
    const res = await http.get(`/selectClueByStoreId/${storeId.value}`)
    Toast.clear();
    console.log(res);
    clueList.value = res.data
}
getClue()

const getTime = () => {
  let now = new Date();
  let year = now.getFullYear();
  let month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要加1
  let day = String(now.getDate()).padStart(2, '0');
  let formattedDate = `${year}-${month}-${day}`;
  return formattedDate;
}
</script>

<template>
  <div class="page">
    <div class="clue-item" @click="goVideoInformation(item.clueId)" v-for="item,index in clueList" :key="index">
         <div class="item-top">
            <div>{{item.clueName}}</div>
            <Image class="recover-top-img" :src="require('../../assets/img/all_icon_yjtou.png')"/>
         </div>
         <div class="item-bottom">
            <span style="margin-right: 4vw;">线索：{{item.clueTotal}}</span>
            <span class="blue">未私信：{{item.clueSXNO}}</span>
         </div>
    </div>
  </div>
</template>

<style>
.page{
    padding: 3vw;
    background-color: rgb(245,247,250);
    box-sizing: border-box;
}
.clue-item{
    width: 94vw;
    height: 24vw;
    background-color: #fff;
    border-radius: 2vw;
    padding: 4vw;
    box-sizing: border-box;
    margin-bottom: 3vw;
}
.clue-item:nth-child(1){
    margin-top: 3vw;
}
.recover-top-img{
    display: block;
    width: 6vw;
    height: 6vw;
}

.blue{
    color: rgb(64,158,255);
}
.item-top{
    display: flex;
    align-items: center;
    margin-bottom: 3vw;
}
.item-bottom{
    display: flex;
    align-items: center;
    font-size: 3.73vw;
    color: rgb(144,147,153);
}
</style>